<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>范闲商城-用户中心</title>
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/reset.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/main.css}">
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
	<script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>
	<style>
		.avatar-img {
			width: 20px; /* 设置头像图片的宽度 */
			height: 20px; /* 设置头像图片的高度，可以根据需要调整 */
			border-radius: 50%; /* 使图片呈现圆形 */
			margin-right: 10px; /* 设置头像图片与用户名之间的间距，可以根据需要调整 */
		}

		.coupon {
			display: inline-flex;
			color: white;
			position: relative;
			padding-left: .5rem;
			padding-right: .5rem;
			margin: 1rem;
			/** 这里不能用百分号，因为百分号是分别相对宽和高计算的，会导致弧度不同  */
			border-top-right-radius: .3rem;
			border-bottom-right-radius: .3rem;
			overflow: hidden;
		}

		.coupon-grey-gradient {
			background-image: linear-gradient(150deg, #C0C0C0 50%, #C0C0C0D8 50%);
		}
		.coupon-yellow-gradient {
			background-image: linear-gradient(150deg, #F39B00 50%, #F39B00D8 50%);
		}
		.coupon-red-gradient {
			background-image: linear-gradient(150deg, #D24161 50%, #D24161D8 50%);
		}
		.coupon-green-gradient {
			background-image: linear-gradient(150deg, #7EAB1E 50%, #7EAB1ED8 50%);
		}
		.coupon-blue-gradient {
			background-image: linear-gradient(150deg, #50ADD3 50%, #50ADD3D8 50%);
		}
		/* 左边框的波浪 */
		.coupon-wave-left::before, .coupon-wave-right::after{
			content: '';
			position: absolute;
			top: 0;
			height: 100%;
			width: 14px;
			background-image: radial-gradient(white 0, white 4px, transparent 4px);
			/** 如果只设置为半径的两倍(直径)，那么半圆之间没有类似堤岸的间隔 */
			background-size: 14px 14px;
			background-position: 0 2px;
			background-repeat: repeat-y;
			z-index: 1;
		}
		.coupon-wave-left::before {
			left: -7px;
		}
		.coupon-wave-right::after {
			right: -7px;
		}
		.coupon-info {
			padding-left: 1rem;
			padding-right: 1rem;
			padding-top: 1rem;
			padding-bottom: 1.5rem;
			position: relative;
			min-width: 15rem;
		}
		.coupon-info-right-dashed {
			border-right: 2px dashed white;
		}

		.coupon-info::before {
			top: -.5rem;
		}
		.coupon-info::after {
			bottom: -.5rem;
		}
		.coupon-info>div {
			margin-bottom: .2rem;
		}
		.coupon-price {
			font-size: 250%;
			font-weight: bold;
		}
		.coupon-price>span {
			font-size: 40%;
			margin-left: .5rem;
			font-weight: normal;
		}
		.coupon-get {
			padding: 1rem;
			/** 这里使用flex是为了让文字居中 */
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			min-width: 5rem;
			position: relative;
		}
		.coupon-get>.coupon-desc {
			font-size: 150%;
			margin-bottom: .5rem;
			font-weight: bold;
		}
	</style>
</head>
<body>

	<div th:replace="header::top"></div>


	<div class="search_bar clearfix">
		<a href="/" class="logo fl"><img src="/static/pic/fanxian-mall.png" width="150px" height="60px"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>
		<div class="search_con fr">
			<input type="text" id="searchInput" class="input_text fl" placeholder="搜索商品">
			<input type="button" id="searchButton" class="input_btn fr" value="搜索">
		</div>
	</div>

	<div class="navbar_con">
		<div class="navbar clearfix">
			<div class="subnav_con fl">
				<h1>全部商品分类</h1>
				<span></span>
				<ul class="subnav" id="LAY_CategoryList">
				</ul>
			</div>
			<ul class="navlist fl">
				<li><a href="/">首页</a></li>
				<li class="interval">|</li>
				<li><a href="/page/list">全部商品</a></li>
				<li class="interval">|</li>
				<li><a href="/page/turntable">抽奖</a></li>
			</ul>
		</div>
	</div>
	<br>

	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="/page/user/info">· 个人信息</a></li>
				<li><a href="/page/user/order">· 全部订单</a></li>
				<li><a href="/page/user/site">· 收货地址</a></li>
				<li><a href="/page/user/coupon" class="active">· 我的优惠券</a></li>
				<li><a href="/page/user/collect">· 我的收藏</a></li>
				<li><a href="/page/user/footprint">· 我的足迹</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">
			<h3 class="common_title2">我的优惠券</h3>
				<div class="info_con clearfix" id="couponList">
					<ul class="user_info_list">
						<li><span>用户名：</span>18210569700</li>
						<li><span>联系方式：</span>18210569700</li>
						<li><span>联系地址：</span>北京市昌平区</li>
					</ul>
				</div>
		</div>
	</div>



	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2024 北京鑫鑫科技有限公司 All Rights Reserved</p>
		<p>电话：010-8888888    京ICP备88888888号</p>
	</div>
	<script>
		$('#searchButton').click(function() {
			var searchText = $('#searchInput').val(); // 获取搜索框中的值
			var searchUrl = '/page/list?search=' + encodeURIComponent(searchText); // 构建带有搜索关键字的URL
			window.location.href = searchUrl; // 跳转到另一个页面
		});
		$.post(
				'/coupon/couponListSelectByUserId',
				function (result) {
					if (result.code == 0) {
						var html = '';
						$('#couponList').empty();
						$(result.data).each(function () {
							if (this.isDeleted !== 1) {
								var currentDate = new Date();
								var year = currentDate.getFullYear();
								var month = currentDate.getMonth() + 1;
								var day = currentDate.getDate();
								// 在单个数字前添加零，以保持日期格式的一致性
								if (month < 10) {
									month = "0" + month;
								}
								if (day < 10) {
									day = "0" + day;
								}
								var dateString = year + "-" + month + "-" + day;
								if (this.expiryDate >= dateString) {
									if (this.couponName == '100减99优惠券') {
										var discount = Math.abs(this.discount);
										html += '<div class="coupon coupon-wave-left coupon-wave-right coupon-red-gradient">'
										html += '	<div class="coupon-info coupon-info-right-dashed">'
										html += '		<div class="coupon-store">范闲商城</div>'
										html += '		<div class="coupon-price">¥'+discount+'.00<span>优惠券</span></div>'
										html += '		<div class="coupon-description">订单满'+this.rebate+'.00元</div>'
										html += '	</div>'
										html += '	<div class="coupon-get">'
										html += '		<div class="coupon-desc">副劵</div>'
										html += '		<div class="coupon-expiry-date">'+this.gainDate+'<br/>'+this.expiryDate+'</div>'
										html += '	</div>'
										html += '</div>'
									} else if (this.couponName == '59减15优惠券') {
										var discount = Math.abs(this.discount);
										html += '<div class="coupon coupon-wave-left coupon-wave-right coupon-yellow-gradient">'
										html += '	<div class="coupon-info coupon-info-right-dashed">'
										html += '		<div class="coupon-store">范闲商城</div>'
										html += '		<div class="coupon-price">¥'+discount+'.00<span>优惠券</span></div>'
										html += '		<div class="coupon-description">订单满'+this.rebate+'.00元</div>'
										html += '	</div>'
										html += '	<div class="coupon-get">'
										html += '		<div class="coupon-desc">副劵</div>'
										html += '		<div class="coupon-expiry-date">'+this.gainDate+'<br/>'+this.expiryDate+'</div>'
										html += '	</div>'
										html += '</div>'
									} else if (this.couponName == '39减10优惠券') {
										var discount = Math.abs(this.discount);
										html += '<div class="coupon coupon-wave-left coupon-wave-right coupon-blue-gradient">'
										html += '	<div class="coupon-info coupon-info-right-dashed">'
										html += '		<div class="coupon-store">范闲商城</div>'
										html += '		<div class="coupon-price">¥'+discount+'.00<span>优惠券</span></div>'
										html += '		<div class="coupon-description">订单满'+this.rebate+'.00元</div>'
										html += '	</div>'
										html += '	<div class="coupon-get">'
										html += '		<div class="coupon-desc">副劵</div>'
										html += '		<div class="coupon-expiry-date">'+this.gainDate+'<br/>'+this.expiryDate+'</div>'
										html += '	</div>'
										html += '</div>'
									}
								} else {
										var discount = Math.abs(this.discount);
										html += '<div class="coupon coupon-wave-left coupon-wave-right coupon-grey-gradient">'
										html += '	<div class="coupon-info coupon-info-right-dashed">'
										html += '		<div class="coupon-store">范闲商城</div>'
										html += '		<div class="coupon-price">¥'+discount+'.00<span>优惠券</span></div>'
										html += '		<div class="coupon-description">订单满'+this.rebate+'.00元</div>'
										html += '	</div>'
										html += '	<div class="coupon-get">'
										html += '		<div class="coupon-desc">已过期</div>'
										html += '		<div class="coupon-expiry-date">'+this.gainDate+'<br/>'+this.expiryDate+'</div>'
										html += '	</div>'
										html += '</div>'
								}


							}
							//  else {
							// 	var discount = Math.abs(this.discount);
							// 	html += '<div class="coupon coupon-wave-left coupon-wave-right coupon-grey-gradient">'
							// 	html += '	<div class="coupon-info coupon-info-right-dashed">'
							// 	html += '		<div class="coupon-store">范闲商城</div>'
							// 	html += '		<div class="coupon-price">¥'+discount+'.00<span>优惠券</span></div>'
							// 	html += '		<div class="coupon-description">订单满'+this.rebate+'.00元</div>'
							// 	html += '	</div>'
							// 	html += '	<div class="coupon-get">'
							// 	html += '		<div class="coupon-desc">已使用</div>'
							// 	html += '		<div class="coupon-expiry-date">'+this.gainDate+'<br/>'+this.expiryDate+'</div>'
							// 	html += '	</div>'
							// 	html += '</div>'
							// }
						});
						$('#couponList').append(html);
					}
				},
				'json'
		);
		$.post(
				'/category/listAll',
				function (result) {
					if (result.code == 0) {
						$('#LAY_CategoryList').empty();
						$(result.data).each(function () {
							$('#LAY_CategoryList').append('<li><a href="/page/list?parentId=' + this.id + '">'+this.name+'</a></li>');
						})
					}
				},
				'json'
		);
		function logout() {
			layer.confirm(
					'您确认要退出么',
					{icon:3},
					function() {
						$.post(
								'/user/logout',
								function (result) {
									if (result.code == 0) {
										mylayer.okMsg(result.msg);
										setTimeout(function() {
											window.location.reload();
										}, 800);
									}
								},
								'json'
						);
						// location.href = '/admin?method=logout'
					}
			);
		}
	</script>
</body>
</html>